<template>
  <div>
    <el-form :inline="true" :model="formInfo" class="demo-form-inline" style="margin-left: 10%;margin-top: 30px;">
      <el-form-item label="协议编号">
          <el-input v-model="formInfo.name" placeholder="请输入协议编号" style="width: 300px;margin-right: 50px;"></el-input>
      </el-form-item>
      <el-form-item label="协议名称">
          <el-input v-model="formInfo.leixing" placeholder="请输入协议名称" style="width: 300px;margin-right: 50px;"></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 5%;">
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="primary" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <hr style="width: 90%;border: 1px solid #f2f2f2;">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="demo">
      <el-tab-pane label="待创建" name="1">
        <el-table :data="reding">
          <el-table-column label="序号" align="center" prop="id" />
          <el-table-column label="框架计划编号" align="center" prop="expertName" />
          <el-table-column label="框架计划名称" align="center" prop="phone" />
          <el-table-column label="采购方式" align="center" prop="workUnit" />
          <el-table-column label="供应商" align="center" prop="workUnit" />
          <el-table-column label="状态" align="center" prop="workUnit" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="xiadan(scope.row)"
              >下单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="已创建" name="2">
        <el-table :data="end">
          <el-table-column label="序号" align="center" prop="id" />
          <el-table-column label="框架计划编号" align="center" prop="expertName" />
          <el-table-column label="框架计划名称" align="center" prop="phone" />
          <el-table-column label="创建人" align="center" prop="workUnit" />
          <el-table-column label="创建日期" align="center" prop="workUnit" />
          <el-table-column label="合同状态" align="center" prop="workUnit" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="zuofei(scope.row)"
              >作废</el-button>
              <el-button
                size="mini"
                type="text"
                @click="zuofei(scope.row)"
              >编辑</el-button>
              <el-button
                size="mini"
                type="text"
                @click="zuofei(scope.row)"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
              >--</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
	export default {
		name: 'framework',
		data () {
		    return {
		      key: '框架协议管理',
          formInfo:{},
          activeName:"1",
          reding:[
            {id:1}
          ],
          end:[
            {id:1}
          ]
		    }
		},
		components: {

		},
		props : [],
		mounted () {

		},
		methods: {
      xiadan(row){
        console.log(row)
      },
      handleQuery() {//搜索按钮操作
        console.log("搜索")
      },
      resetQuery() {//重置按钮操作
        console.log("重置")
      },
		}
	}
</script>

<style scoped>
  .demo {
    width: 90%;
    margin-left: 5%;
    font-size: 14px;
  }
</style>
